<template>
  <div>
    <a-card class="table-search">
      <a-form layout="inline">
        <!-- <a-form-item label="组织">
          <a-cascader
            v-model="queryParam.orgIds"
            changeOnSelect
            :field-names="{ label: 'name', value: 'id', children: 'children' }"
            :options="orgOptions"
            placeholder="请选择"
          />
        </a-form-item> -->
        <a-form-item label="账号">
          <a-input v-model="queryParam.account" placeholder="请输入" />
        </a-form-item>
        <a-form-item label="姓名">
          <a-input v-model="queryParam.name" placeholder="请输入" />
        </a-form-item>
        <a-form-item label="手机号">
          <a-input v-model="queryParam.phone" placeholder="请输入" />
        </a-form-item>
        <a-form-item>
          <a-button type="primary" icon="search" @click="searchList">查询</a-button>
          <a-button icon="reload" @click="resetForm">重置</a-button>
        </a-form-item>
      </a-form>
    </a-card>
    <a-card>
      <div class="table-operator">
        <a-button :loading="downloadLoading" type="primary" @click="handleDownload" slot="extra">
          <a-icon type="upload" />导出
        </a-button>
      </div>
      <a-table
        :columns="columns"
        :dataSource="pageData.records"
        rowKey="id"
        :loading="pageData.tableLoading"
        :pagination="pagination"
      >
        <span slot="createTime" slot-scope="text">
          {{ text | moment }}
        </span>
        <span slot="action" slot-scope="text, record">
          <template v-if="userInfo.id !== record.id">
            <a @click.prevent="() => linkTo(record.id, record.account)">去审核</a>
            <a-divider type="vertical" />
            <a-popconfirm title="确定删除吗?" @confirm="() => batchDelete(record.id)">
              <a href="javascript:;" style="color:#ff4d4f">拒绝</a>
            </a-popconfirm>
          </template>
        </span>
      </a-table>
    </a-card>

    <!-- 点击编辑按钮出现的弹框 -->
    <a-drawer
      :title="infoDialog.title"
      :visible.sync="infoDialog.show"
      width="600px"
      center
      @close="infoDialog.show = false"
    >
      <component :is="infoDialog.component" :current-info="infoDialog" @emitToParent="getChildValue" />
    </a-drawer>
  </div>
</template>

<script>
import { getUserList, deleteUserInfo, getOrgTree } from '@/api/system'
import { mapState } from 'vuex'

const columns = [
  {
    title: '账号',
    dataIndex: 'account'
  },
  {
    title: '姓名',
    dataIndex: 'name'
  },
  {
    title: '手机号',
    dataIndex: 'phone'
  },
  {
    title: '邮箱',
    dataIndex: 'email'
  },
  {
    title: '创建时间',
    dataIndex: 'createTime',
    scopedSlots: { customRender: 'createTime' }
  },
  {
    title: '操作',
    dataIndex: 'action',
    scopedSlots: { customRender: 'action' }
  }
]
export default {
  components: {
    Info: () => import('./info')
  },
  data () {
    return {
      columns, // 表格列数据项
      queryParam: {}, // 查询参数
      downloadLoading: false,
      pagination: { // 表格分页数据项
        total: 0,
        pageSize: 10,
        current: 1,
        onShowSizeChange: (current, size) => {
          this.pagination.current = current
          this.pagination.pageSize = size
          this.getList()
        },
        onChange: (current, size) => {
          this.pagination.current = current
          this.pagination.pageSize = size
          this.getList()
        },
        showSizeChanger: true,
        showQuickJumper: true
      },
      pageData: { // 表格数据列表
        tableLoading: false,
        records: [{
          'id': 1,
          'account': 'test',
          'name': 'test',
          'phone': '1234567890',
          'email': '123@qq.com',
          'createTime': '2021-07-01'
        }]
      },
      orgOptions: [],
      infoDialog: { // 对话框
        component: 'Info',
        show: false,
        title: '新增用户',
        type: 'add',
        id: ''
      }
    }
  },
  computed: {
    ...mapState({
      userInfo: state => state.user.info
    })
  },
  created () {
    // this.getList()
    // this.getOrgTreeData()
  },
  methods: {
    getOrgTreeData () {
      getOrgTree({ projectId: this.projectId }).then(res => {
        this.orgOptions = res.content
      }).finally(res => {
        this.pageData.tableLoading = false
      })
    },
    onOrgSelect (selectedKeys, info) {
      if (selectedKeys.length > 0) {
        this.queryParam.organizationId = selectedKeys[0]
      } else {
        this.queryParam.organizationId = null
      }
      this.getList()
    },
    // 获取用户角色
    getRoleNames (list) {
      if (!list) {
        return ''
      }
      const names = list.map(item => item.name)
      return names.join('，')
    },
    // excel 导出
    handleDownload () {
      this.downloadLoading = true
      import('@/utils/Export2Excel').then(excel => {
        const tHeader = ['ID', '账号', '姓名', '手机号', '邮箱', '创建时间']
        const filterVal = ['id', 'account', 'name', 'phone', 'email', 'createTime']
        const list = this.pageData.records
        const data = list.map(v => filterVal.map(j => {
          return v[j]
        }))
        excel.export_json_to_excel({
          header: tHeader,
          data,
          filename: '用户列表'
        })
        this.downloadLoading = false
      })
    },
    // 获取子组件的值
    getChildValue (val) {
      this.infoDialog.show = false
      val && this.getList()
    },
    // 重置查询 form
    resetForm () {
      this.queryParam = {}
      this.pagination.pageSize = 10
      this.pagination.current = 1
      this.getList()
    },
    searchList () {
      this.pagination.pageSize = 10
      this.pagination.current = 1
      this.getList()
    },
    // 查询列表
    getList () {
      this.pageData.tableLoading = true
      const params = {
        size: this.pagination.pageSize,
        current: this.pagination.current,
        status: 0,
        ...this.queryParam
      }
      getUserList(params).then(res => {
        this.pageData.records = res.content.records
        this.pagination.total = res.content.total
      }).finally(res => {
        this.pageData.tableLoading = false
      })
    },
    // 跳转详情页
    linkTo (id, name) {
      this.infoDialog = {
        component: 'Info',
        show: true,
        status: 0,
        title: '审核用户：' + name,
        id
      }
    },
    // 删除
    batchDelete (id) {
      deleteUserInfo({ id }).then(response => {
        this.$message.success('删除成功！')
        this.getList()
      })
    }
  }
}
</script>
